<template >
  <div class="device-detail">
    <h3>设备详情</h3>
    <div>
      <p class="device-id"><span>设备编号：</span><span>{{device.id}}</span></p>
      <p class="device-status"><span>设备状态：</span><span>{{device.status}}</span></p>
      <p class="device-category"><span>设备分类：</span><span>{{device.category}}</span></p>
      <p class="device-number"><span>数量：</span><span>{{device.number}}</span></p>
      <p class="device-price"><span>单价：</span><span>{{device.price}}</span></p>
      <p class="device-date"><span>购置日期：</span><span>{{device.time}}</span></p>
      <p>
        <el-button type="success" @click="edit(device)">编辑</el-button>
        <el-button type="success" @click="audit(device.id)">审核</el-button>
        <el-button plain @click="backDefault">返回列表</el-button>
      </p>
    </div>
  </div>
</template>

<script>
export default {
  name: "DeviceDetail",
  data() {
    return {
      device:{}
    }
  },
  methods: {
    backDefault() {
      this.$store.commit('changeDefault',true)
      this.$router.push('/home/register')
    },
    edit(obj) {
      this.$store.commit('changeDefault', false)
      this.$router.push({
        path: `/home/register/edit?obj=${JSON.stringify(obj)}`
      })
    },
    audit(id) {
      this.$axios({
        method:'post',
        url:'/pre-check',
        data: {
          id
        }
      }).then(res => {
        if(res.data.code == 0){
          this.$message({
          message: '审核成功',
          type: 'success'
        });
        }
        this.$router.go(0)
      })
    }
  },
  created() {
    this.device = JSON.parse(this.$route.query.obj)
  }
}
</script>

<style lang="less" scoped>
  .device-id {
    height: 60px;
    font-size: 20px;
    line-height: 60px;
    border-bottom: 1px solid #ccc;
  }
  p {
    line-height: 30px;
    display: flex;
    span {
      &:first-child {
        width: 100px;
        text-align: right;
      }
      &:last-child {
        margin-left: 20px;
      }
    }
  }
</style>